<div class="mat-elevation-z1">
  <mat-toolbar>
    <span class="toolbar-title">交易所API</span>
    <span class="spacer"></span>
    <button mat-stroked-button color="primary" (click)="editNew()">
      <mat-icon>add_circle_outline</mat-icon>
      新建
    </button>
  </mat-toolbar>

  <table mat-table class="full-width" matSort>

    <ng-container matColumnDef="index">
      <th mat-header-cell *matHeaderCellDef>#</th>
      <td mat-cell *matCellDef="let row; let index=index">
        {{index + 1 }}
      </td>
    </ng-container>

    <ng-container matColumnDef="ex">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>平台</th>
      <td mat-cell *matCellDef="let row">{{row.ex}}</td>
    </ng-container>

    <ng-container matColumnDef="phase">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Phase</th>
      <td mat-cell *matCellDef="let row">{{row.phase}}</td>
    </ng-container>

    <ng-container matColumnDef="key">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Key</th>
      <td mat-cell *matCellDef="let row">{{row.key | truncate: 7 }}</td>
    </ng-container>

    <ng-container matColumnDef="secret">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Secret</th>
      <td mat-cell *matCellDef="let row">{{row.secret | truncate: 7 }}</td>
    </ng-container>

    <ng-container matColumnDef="createdAt">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>创建于</th>
      <td mat-cell *matCellDef="let row">{{row.createdAt | date:'y-MM-dd'}}</td>
    </ng-container>

    <ng-container matColumnDef="updatedAt">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>上次修改</th>
      <td mat-cell *matCellDef="let row">{{row.updatedAt | date:'y-MM-dd'}}</td>
    </ng-container>

    <ng-container matColumnDef="enabled">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>启用</th>
      <td mat-cell *matCellDef="let row">
        <mat-icon class="check" *ngIf="row.enabled">check</mat-icon>
      </td>
    </ng-container>

    <ng-container matColumnDef="memo">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>备注</th>
      <td mat-cell *matCellDef="let row">{{row.memo}}</td>
    </ng-container>

    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let row" align="end">

        <button mat-button (click)="edit(row)">
          <mat-icon>edit</mat-icon>
          修改
        </button>
        <button mat-button [matMenuTriggerFor]="actions">
          <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #actions="matMenu">
          <button mat-menu-item (click)="remove(row)">
            <mat-icon>remove_circle_outline</mat-icon>
            删除
          </button>
        </mat-menu>

      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>


</div>
